<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="设备编号:" prop="deviceCode">
        <el-select v-model="form.deviceCode" clearable>
          <el-option
            v-for="item of deviceArr"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <!-- <el-button type="primary" @click="output">导出</el-button> -->
        <el-button type="success" @click="addForm" v-permission="['check:add']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
      <template #standardType="{ row }">
        {{
          row.standardType == 0 ? "PLC" : row.standardType == 1 ? "CCD" : "其它"
        }}
      </template>
    </hcTable>
    <addAndEdit
      :options="editOption"
      @closeDialog="closeDialog"
      :standardType="standardType"
      :deviceArr="deviceArr"
      :recipeArr="recipeArr"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import addAndEdit from "./dialog/addAndEdit.vue";
import useQueryTable from "@/hooks/useQueryTable";
import { getRecipe } from "@/api/recipe";

let form = reactive({
  deviceCode: "",
});
let standardType = [
  { label: "PLC", value: 0 },
  { label: "CCD", value: 1 },
  { label: "其它", value: 2 },
];

let deviceArr = ref([]);
let recipeArr = ref([]);

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "deviceCode", label: "设备编号", align: "center" },
  { prop: "recipeName", label: "配方名称", align: "center" },
  {
    prop: "standardType",
    label: "检测类型",
    align: "center",
    slot: "standardType",
    width: 100,
  },
  { prop: "standardName", label: "检测项", align: "center" },
  { prop: "standardValue", label: "标注值", align: "center" },
  { prop: "standardUpper", label: "标注值上限", align: "center" },
  { prop: "standardLower", label: "标注值下限", align: "center" },
  { prop: "standardUnit", label: "单位", align: "center", width: 80 },
  { prop: "remark", label: "备注", showOverflowTooltip: true },
  {
    width: "120",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "编辑",
        type: "warning",
        command: "edit",
        permission: ["check:edit"],
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
        permission: ["check:delete"],
      },
    ],
  },
];

let {
  list,
  query,
  addForm,
  options,
  editOption,
  closeDialog,
  handleAction,
  handlerPageSize,
  handlerPageIndex,
} = useQueryTable(
  { get: "/TestingStandards/GetPageList", del: "/TestingStandards/Delete" },
  form
);

async function getRecipeData() {
  deviceArr.value = [];
  recipeArr.value = [];
  let res = await getRecipe();
  res.items.forEach((item) => {
    !deviceArr.value.includes(item.deviceCode) &&
      deviceArr.value.push(item.deviceCode);
    recipeArr.value.push({
      recipeNo: item.recipeNo,
      recipeName: item.recipeName,
    });
  });
}

onMounted(() => {
  getRecipeData();
});
</script>

<style lang="scss" scoped></style>
